<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	var cfg = null;
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		cfg = {SearchMode:smClientPaging,Page:50,MergeSheet:msHeaderOnly};
		
		var headers = [ {Text:"개봉일|영화명|영문제목|감독|주연배우|등급", Align:"Center"} ];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Date",Width:85,SaveName:"OPEN_DATE",Format:"Ymd",Align:"Center"},
			{Type:"Text",Width:180,SaveName:"MOVIE_NM"},
			{Type:"Text",Width:150,SaveName:"ENG_NM"},
			{Type:"Text",Width:120,SaveName:"DIRECTOR"},
			{Type:"Text",Width:150,SaveName:"ACTOR"},
			{Type:"Combo",Width:50,SaveName:"FILM_RATE",Align:"Center",ComboText:"12세|15세|18세|전체|청불",ComboCode:"01|02|03|04|05"}
		];
		
		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);

		mySheet.SetCountPosition(4);
		mySheet.FitColWidth();
		
		doAction("search");
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/MOVIE01.json");
				break;
		}
	}
	
	function mySheet_OnSearchEnd() {
		//makePageIndex(1);
		
		var sr = mySheet.SearchRows(); //전체 조회 건수
		var page = cfg.Page; //페이지당 레코드 수
		var lastpage = Math.ceil(sr/page);
		
		$('#curPage').val(1);
		$('#maxPage').val(lastpage);
		
		mySheet.FitColWidth();
	}
	
	function prevPage() {
		var num = parseInt($('#curPage').val());
		
		num--;
		num = (num < 1) ? num = 1 : num;
		
		mySheet.GoToPageNum(num);
		
		$('#curPage').val(num);
	}
	
	function nextPage() {
		var num = parseInt($('#curPage').val());
		var max = parseInt($('#maxPage').val());
		
		num++;
		num = (num >= max) ? num = max : num;
		
		mySheet.GoToPageNum(num);
		
		$('#curPage').val(num);
	}
	
</script>
<title>페이징 조회 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">페이징 조회 예제</div>
	<div id="desc">
		전체 데이터를 조회 후 일정 건수만 화면에 로딩하고, 페이지버튼을 누르때 마다 조회된 데이터 중에 페이지에 해당하는 데이터를 화면에 보여준다.<br>
		<br>
		// 페이징 모드 설정<br>
		var cfg = {SearchMode:smClientPaging, Page:10};&nbsp;&nbsp;&nbsp;&nbsp;// 또는 SearchMode:1<br>
		mySheet.SetConfig(cfg);<br>
		<br>
		GoToPageNum 메서드는 페이징 모드로 설정되어 있는 경우 인자로 입력한 페이지로 이동한다.<br>
		이 기능을 사용하기 위해서는 SetConfig 함수에서 SearchMode를 페이징 모드로 설정 하여야 한다.<br>
		<br>
		// 5번째 페이지로 이동<br>
		mySheet.GoToPageNum(5);
	</div>

	<div id="functionArea">
		<div>
			<span>
			현재 페이지 <input id="curPage" size=4 type="text" readonly/> / 최대 페이지 수 <input id="maxPage" size=4 type="text" readonly/>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button" value="이전 페이지" onclick="prevPage()">
			<input type="button" value="다음 페이지" onclick="nextPage()">
			</span>
		</div>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>